<template>
  <!-- 层叠过渡效果 -->
  <transition name="el-zoom-in-center">
    <div class="jsbos-preview-main flow-form-main">
      <div class="jsbos-common-page-header">
        <!-- 页头 -->
        <el-page-header @back="goBack" content="试题管理" />
        <!-- 确定/取消 -->
        <div class="options">
          <el-button @click="goBack()">{{
            $t("common.cancelButton")
          }}</el-button>
        </div>
      </div>
      <!-- 试题列表 -->
      <div class="jsbos-common-layout">
        <div class="jsbos-common-layout-center">
          <el-row class="jsbos-common-search-box" :gutter="16">
            <el-form @submit.native.prevent>
              <el-col :span="4">
                <el-form-item label="题型">
                  <el-select
                    v-model="query.questionType"
                    placeholder="请选择"
                    clearable
                  >
                    <el-option
                      v-for="(item, index) in questionTypeOptions"
                      :key="index"
                      :label="item.fullName"
                      :value="item.enCode"
                      :disabled="item.disabled"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="题干">
                  <el-input
                    v-model="query.title"
                    placeholder="请输入"
                    clearable
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="试题等级">
                  <el-select
                    v-model="query.difficultyGradeId"
                    placeholder="请选择"
                    :style="{ width: '100%' }"
                  >
                    <el-option
                      v-for="(item, index) in difficultyGradeOptions"
                      :key="index"
                      :label="item.fullName"
                      :value="item.id"
                      :disabled="item.disabled"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item>
                  <el-button
                    type="primary"
                    icon="el-icon-search"
                    @click="search()"
                    >查询</el-button
                  >
                  <el-button icon="el-icon-refresh-right" @click="reset()"
                    >重置</el-button
                  >
                </el-form-item>
              </el-col>
            </el-form>
          </el-row>
          <div class="jsbos-common-layout-main jsbos-flex-main">
            <div class="jsbos-common-head">
              <div>
                <!-- v-has="'btn_add'" -->
                <el-button
                  type="primary"
                  icon="el-icon-plus"
                  @click="goQuestionAdd()"
                  >新增
                </el-button>
                <!-- v-has="'btn_upload'" -->
                <el-button
                  type="primary"
                  icon="el-icon-upload2"
                  @click="uploadForm"
                  >导入</el-button
                >
                <!-- v-has="'btn_download'" -->
                <!--                <el-button-->
                <!--                  type="text"-->
                <!--                  icon="el-icon-download"-->
                <!--                  @click="exportData()"-->
                <!--                  >导出-->
                <!--                </el-button>-->
                <!-- v-has="'btn_batchRemove'" -->
                <el-button
                  type="text"
                  icon="el-icon-delete"
                  @click="handleBatchRemoveDel()"
                  >批量删除
                </el-button>
              </div>
              <div class="jsbos-common-head-right">
                <el-tooltip effect="dark" content="刷新" placement="top">
                  <el-link
                    icon="icon-ym icon-ym-Refresh JSBOS-common-head-icon"
                    :underline="false"
                    @click="reset()"
                  />
                </el-tooltip>
                <screen-full isContainer />
              </div>
            </div>
            <jsbos-table
              v-loading="listLoading"
              :data="list"
              @sort-change="sortChange"
              has-c
              @selection-change="handleSelectionChange"
            >
              <el-table-column
                prop="questionTypeName"
                label="题型"
                width="0"
                :align="'left'"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                prop="title"
                label="题干"
                width="0"
                :align="'left'"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                prop="difficultyGradeId"
                label="试题等级id"
                width="0"
                :align="'left'"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                prop="analysis"
                label="答案解析"
                width="0"
                :align="'left'"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                prop="optionRandom"
                label="选项打乱"
                width="0"
                :align="'left'"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                prop="creatorUserId"
                label="创建用户"
                width="150"
                :align="'left'"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                prop="creatorTime"
                label="创建时间"
                width="180"
                :align="'left'"
                :show-overflow-tooltip="true"
              />
              <el-table-column label="操作" width="150" fixed="right">
                <template slot-scope="scope">
                  <!-- v-has="'btn_edit'" -->
                  <el-button type="text" @click="goQuestionEdit(scope.row.id)"
                    >编辑
                  </el-button>
                  <!-- v-has="'btn_remove'" -->
                  <el-button
                    type="text"
                    class="jsbos-table-delBtn"
                    @click="handleDel(scope.row.id)"
                    >删除
                  </el-button>
                  <!-- v-has="'btn_detail'" -->
                  <!--                  <el-button type="text" @click="goDetail(scope.row.id)"-->
                  <!--                    >详情-->
                  <!--                  </el-button>-->
                </template>
              </el-table-column>
            </jsbos-table>
            <pagination
              :total="total"
              :page.sync="listQuery.currentPage"
              :limit.sync="listQuery.pageSize"
              @pagination="initData"
            />
          </div>
        </div>
      </div>

      <QuestionAddDialog
        ref="QuestionAddDialog"
        v-if="questionAddVisible"
        @close="closeQuestionAddDialog"
      ></QuestionAddDialog>
      <QuestionEditDialog
        ref="QuestionEditDialog"
        v-if="questionEditVisible"
        @close="closeQuestionEditDialog"
      ></QuestionEditDialog>
      <!-- 导入 -->
      <ImportForm v-if="importFormVisible" ref="importForm" @refresh="reset" />
    </div>
  </transition>
</template>

<script>
import { getList, Delete, batchDelete } from "@/views/exam/api/question";
import QuestionAddDialog from "./questionAddDialog";
import QuestionEditDialog from "./questionEditDialog";
import ImportForm from "@/views/exam/questionLibrary/ImportForm.vue";
import { getSelector as getGradeSelector } from "@/views/exam/api/difficultyGrade";

export default {
  components: { QuestionAddDialog, QuestionEditDialog, ImportForm },
  props: {
    menuId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      btnLoading: false,
      loading: false,
      // 导入 显示/隐藏
      importFormVisible: false,
      // 题库id
      folderId: undefined,
      query: {
        questionType: undefined,
        title: undefined,
        difficultyGradeId: undefined,
        labels: undefined,
      },
      list: [],
      listLoading: true,
      multipleSelection: [],
      total: 0,
      listQuery: {
        keyword: "",
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "creatorTime",
      },
      questionAddVisible: false,
      questionEditVisible: false,
      exportBoxVisible: false,
      columnList: [
        { prop: "questionType", label: "题型" },
        { prop: "title", label: "题干" },
        { prop: "titimgs", label: "题干图片视频附件" },
        { prop: "options", label: "选项" },
        { prop: "opimgs", label: "选项图片视频附件" },
        { prop: "answers", label: "正确答案" },
        { prop: "labels", label: "标签" },
        { prop: "difficultyGradeId", label: "试题等级id" },
        { prop: "analysis", label: "答案解析" },
        { prop: "analysisimgs", label: "答案解析图片视频附件" },
        { prop: "optionRandom", label: "选项打乱" },
        { prop: "score", label: "分值设置" },
        { prop: "missedScore", label: "漏选给分 多选题" },
        { prop: "scoreType", label: "评分规则(1-空，2-题) 填空题" },
      ],
      questionTypeOptions: [],
      questionTypeProps: {
        label: "fullName",
        value: "id",
      },
      treeProps: {
        children: "children",
        label: "fullName",
        value: "id",
      },
      difficultyGradeOptions: [],
    };
  },
  watch: {},
  created() {
    // this.initData();
    this.getquestionTypeOptions();
    this.getDifficultyGradeOptions();
  },
  methods: {
    /**
     * 获取试题等级 下拉选择项
     */
    getDifficultyGradeOptions() {
      getGradeSelector()
        .then((res) => {
          this.difficultyGradeOptions = res.data;
        })
        .catch(() => {
          this.difficultyGradeOptions = [];
        });
    },
    getquestionTypeOptions() {
      this.$store
        .dispatch("base/getDictionaryData", {
          encode: "questionType",
        })
        .then((res) => {
          this.questionTypeOptions = res;
        });
    },
    goDetail(id) {
      this.detailVisible = true;
      this.$nextTick(() => {
        this.$refs.Detail.init(id);
      });
    },
    sortChange({ column, prop, order }) {
      this.listQuery.sort = order == "ascending" ? "asc" : "desc";
      this.listQuery.sidx = !order ? "" : prop;
      this.initData();
    },
    init(id) {
      this.folderId = id ? id : undefined;
      this.initData();
    },
    initData() {
      let _query = {
        ...this.listQuery,
        ...this.query,
        folderId: this.folderId,
        menuId: this.menuId,
      };
      this.listLoading = true;
      getList(_query).then((res) => {
        var _list = [];
        for (let i = 0; i < res.data.list.length; i++) {
          let _data = res.data.list[i];
          _list.push(_data);
        }
        this.list = _list;
        this.total = res.data.pagination.total;

        this.listLoading = false;
      });
    },
    handleDel(id) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        type: "warning",
      })
        .then(() => {
          Delete(id).then((res) => {
            this.$message({
              type: "success",
              message: res.msg,
              onClose: () => {
                this.initData();
              },
            });
          });
        })
        .catch(() => {});
    },
    handleSelectionChange(val) {
      const res = val.map((item) => item.id);
      this.multipleSelection = res;
    },
    handleBatchRemoveDel() {
      if (!this.multipleSelection.length) {
        this.$message({
          type: "error",
          message: "请选择一条数据",
          duration: 1500,
        });
        return;
      }
      const ids = this.multipleSelection.join();
      this.$confirm("您确定要删除这些数据吗, 是否继续？", "提示", {
        type: "warning",
      })
        .then(() => {
          batchDelete(ids).then((res) => {
            this.$message({
              type: "success",
              message: res.msg,
              onClose: () => {
                this.initData();
              },
            });
          });
        })
        .catch(() => {});
    },
    closeQuestionAddDialog(isRefresh) {
      this.questionAddVisible = false;
      if (isRefresh) this.initData();
    },
    closeQuestionEditDialog(isRefresh) {
      this.questionEditVisible = false;
      if (isRefresh) this.initData();
    },
    goQuestionAdd() {
      this.questionAddVisible = true;
      this.$nextTick(() => {
        this.$refs.QuestionAddDialog.init(this.folderId);
      });
    },
    goQuestionEdit(id) {
      this.questionEditVisible = true;
      this.$nextTick(() => {
        this.$refs.QuestionEditDialog.init(id);
      });
    },
    // 导入 显示
    uploadForm() {
      this.importFormVisible = true;
      this.$nextTick(() => {
        this.$refs.importForm.init(this.folderId, this.menuId);
      });
    },
    exportData() {
      this.exportBoxVisible = true;
      this.$nextTick(() => {
        this.$refs.ExportBox.init(this.columnList);
      });
    },
    download(data) {
      let query = {
        ...data,
        ...this.listQuery,
        ...this.query,
        menuId: this.menuId,
      };
      request({
        url: `/api/exam/question/Actions/Export`,
        method: "GET",
        data: query,
      }).then((res) => {
        if (!res.data.url) return;
        this.jsbos.downloadFile(res.data.url);
        this.$refs.ExportBox.visible = false;
        this.exportBoxVisible = false;
      });
    },
    search() {
      this.initData();
    },
    refresh(isrRefresh) {
      this.formVisible = false;
      if (isrRefresh) this.initData();
    },
    resetListQuery() {
      this.listQuery = {
        keyword: "",
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "creatorTime",
      };
    },
    resetQuery() {
      for (let key in this.query) {
        this.query[key] = undefined;
      }
    },
    reset() {
      this.resetListQuery();
      this.resetQuery();
      this.initData();
    },
    /** 返回 */
    goBack() {
      this.$emit("close", false);
    },
  },
};
</script>
<style lang="scss" scoped></style>
